<!-- 承包商问题事件记分结果应用-->
<template>
  <div>
    <avue-crud
               v-if="!showLevelOneDetails"
               :option="option"
               :search.sync="search"
               :data="data"
               @search-change="searchChange"
               @search-reset="resetChange">
      <!--   自定义列-->
      <template slot="cljg" slot-scope="scope" >
          <el-tag :type="scope.row.cljg=='约谈'?'':scope.row.cljg=='黄牌警告'?'warning':'danger'">{{scope.row.cljg}}</el-tag>
      </template>
      <!--  自定表单-->
      <template slot-scope="scope" slot="qymcForm">
        <el-tag>

        </el-tag>
      </template>
      <!-- 自定义菜单 配置slot卡槽为menuLeft为表单菜单左边位置,卡槽为menuRight为表格菜单右边的位置-->
<!--      <template slot="menuLeft">
        <el-button type="primary" size="small">自定义按钮</el-button>
      </template>
      <template slot="menuRight">
        <el-button type="primary" icon="el-icon-edit" circle size="small"></el-button>
      </template>-->
      <!--  自定义表格里面的操作-->
      <template slot-scope="scope" slot="menu">
        <el-button type="text" size="small" @click="view(scope.row)">查看</el-button>
        <el-button type="text" size="small" :disabled="scope.row.zt!=='0'" @click="affirm">确认</el-button>
      </template>
    </avue-crud>

    <!-- 确认弹框   -->
      <el-dialog title="收货地址" :visible.sync="showAffirmDialog" width="40%" class="affirm" >
        <el-form :model="affirmForm">
          <el-form-item label="描述" :label-width="formLabelWidth" prop="desc"  :rules="formRules.desc">
            <el-input type="textarea" rows="5" v-model="affirmForm.desc" placeholder="请输入内容" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="附件" :label-width="formLabelWidth" prop="attachment"  :rules="formRules.attachment">
<!--            <el-input v-model="affirmForm.attachment" autocomplete="off"></el-input>-->
            <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :file-list="fileList">
              <el-button size="small" type="text">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" size="small" @click="showAffirmDialog = false">确 定</el-button>
          <el-button size="small"  @click="showAffirmDialog = false">取 消</el-button>
        </div>
      </el-dialog>

    <!--查看-->
    <LevelOneDetails ref="LevelOneDetails"
                     v-if="showLevelOneDetails"
                     :levelOneHeaderFormOptions="headerFormOptions"
                     :levelOneFormData="formData"
                     @close="close"
                      v-model="content"></LevelOneDetails>
  </div>
</template>

<script>
import LevelOneDetails from "@/components/cbsAssessmentResultsApplication/components/LevelOneDetails";
export default {
  name: "cbsProblemEventScoreResult",
  components: {LevelOneDetails},
  data() {
    return {
      showAffirmDialog:false,
      showLevelOneDetails:false,
      formLabelWidth: '80px',
      affirmForm:{
        desc:'',
        attachment:''
      },
      fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
      search: {
        name: ''
      },
      formRules:{
       desc: [{ required: true, message: '请输入内容', trigger: 'blur' }],
       attachment: [{ required: true, message: '请上传附件', trigger: 'blur' }]
      },
      headerFormOptions:[
        {
          prop:"qymc",
          label:'企业名称'
        },{
          prop:"xmmc",
          label:'项目名称'
        },{
          prop:"jfzq",
          label:'计分周期'
        },{
          prop:"cljg",
          label:'处理结果'
        },{
          prop:"zt",
          label:'状态',
          type:'select',
          dict:[
            {label:'未确认',value:"0"},
            {label:'已确认',value:"1"},
          ]
        }
      ],
      formData:{},
      data: [{
        qymc: '河南建筑工程公司',
        xmmc: '河南建筑工程公司',
        cljg: '约谈',
        clyj: '河南建筑工程公司',
        jfzq: '河南建筑工程公司',
        fs: '河南建筑工程公司',
        zt: '0',

      },{
        qymc: '河南建筑工程公司',
        xmmc: '河南建筑工程公司',
        cljg: '黄牌警告',
        clyj: '河南建筑工程公司',
        jfzq: '河南建筑工程公司',
        fs: '河南建筑工程公司',
        zt: '1',

      },{
        qymc: '河南建筑工程公司',
        xmmc: '河南建筑工程公司',
        cljg: '冻结',
        clyj: '河南建筑工程公司',
        jfzq: '河南建筑工程公司',
        fs: '河南建筑工程公司',
        zt: '1',

      }],
      option: {
        refreshBtn: false,
        columnBtn: false,
        addBtn: false, // 表格新增按钮
        delBtn: false, // 行删除按钮
        viewBtn:false,
        editBtn:false,
        index: true,
        indexLabel: "序号",
        headerAlign: 'center',
        align: 'center',
        column: [{
          label: '企业名称',
          prop: 'qymc',
          search: true,
        }, {
          label: '项目名称',
          prop: 'xmmc',
          search: true,
        },{
          label: '处理结果',
          prop: 'cljg',
        },{
          label: '处理依据',
          prop: 'clyj',
        },{
          label: '记分周期',
          prop: 'jfzq',
          search: true,
        },{
          label: '分数',
          prop: 'fs',
          search: true,
        },{
          label: '状态',
          prop: 'zt',
          search: true,
          type:'select',
          dicData:[{
            label:'未确认',
            value:0
          },{
            label:'已确认',
            value:1
          }],
          formatter: (row,value,label,column) => {
            if (value == 0){
              return label = "未确认"
            }
            return label = "已确认"
          }
        }]
      } ,
      content:'这个测试内容'
    }
  },
  methods:{
    resetChange(item){
      this.$message.success('清空回调')
    },
    searchChange(params,done) {
      this.$message.success('2s后关闭锁定')
      setTimeout(()=>{
        done();
        this.$message.success(JSON.stringify(params));
      },2000)

    },
    view(rowData){
      this.showLevelOneDetails = true ;
      this.headerFormOptions = this.headerFormOptions ;
      this.formData = rowData ;
      // console.log("rowData:",rowData)
      // this.$nextTick(()=>{
      //   this.$refs.LevelOneDetails.initHeaderData(this.headerFormOptions,rowData) ;
      // })
    },
    affirm(){
      this.showAffirmDialog = true ;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    close(){
      this.showLevelOneDetails = false ;
    }
  }
}

</script>

<style scoped>
.affirm >>> .el-dialog__header{border-bottom: 1px solid #DCDFE6!important;padding: 10px 20px }
.affirm >>> .el-dialog__title{font-size: 14px;font-weight: bold}
.affirm >>> .el-dialog__headerbtn{top: 10px!important;}
.affirm >>> .el-form label{font-size: 12px;}
.affirm >>> .dialog-footer{text-align: center}
.affirm >>> .el-dialog__footer{border-top: 1px solid #DCDFE6!important;}

</style>